@import "ng-devui/styles-var/devui-var.scss";

.da-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  .da-nav-menu {
    display: flex;

    .da-nav-item {

      cursor: pointer;

      &:hover{
        background-color: $devui-list-item-hover-bg;
      }&.active{
        background-color: $devui-primary;
        color: $devui-light-text;
      }
      .da-nav-title.da-active-title {
        color: $devui-brand;
        font-weight: 700;

        .icon {
          color: $devui-brand;
          font-weight: 700;
        }
      }
    }
  }
}

.da-nav.da-nav-left {
  width: 100%;
  margin-left: 0;
  align-items: flex-start;

  .da-nav-menu {
    width: 100%;
    flex-direction: column;
    justify-content: center;

    .da-nav-item {
      padding-right: 0;
      border-radius: $devui-border-radius;
      & > span {
        width: 100%;
        line-height: 48px;
        text-align: center;
      }
    }
  }
}

.da-nav-title {
  display: inline-block;
  line-height: 60px;
  white-space: nowrap;
}

.da-nav.da-nav-top{
  display: flex;
  .da-nav-menu1{
    display: flex;
    width: calc(100vw - 621px)!important;
    overflow-x: scroll !important;
    -ms-overflow-style: none;  // IE and Edge
    scrollbar-width: none;  // Firefox
    margin: 0 10px  ;
    &::-webkit-scrollbar {  // Chrome, Safari and Opera
      display: none;
    }

    .da-nav-item{
      cursor: pointer;
      width: 80px;
      text-align: center;
      margin: 0 10px;
      border-radius: $devui-border-radius;
      &:first-child{
        margin-left: 0;
      }
      &:hover{
        background-color: $devui-list-item-hover-bg;
      }&.active{
        color: $devui-primary;
      }
      .da-nav-title.da-active-title {
        color: $devui-brand;
        font-weight: 700;

        .icon {
          color: $devui-brand;
          font-weight: 700;
        }
      }
    }
  }
}
.scroll-button{
  display: none;
  width: 30px;
  color: $devui-primary;
  line-height: 60px;
  text-align: center;
  font-size: larger;
  cursor: pointer;
  &:hover{
    background-color: $devui-list-item-hover-bg;
  }
}
@media screen and (max-width: 1746px) {
  .scroll-button{
    display: block;
  }
}
